<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import LoginHeader from './components/LoginHeader.vue'
import LoginForm from './components/LoginForm.vue'
import { ref } from 'vue'

const activeName = ref('account')
</script>

<template>
  <div>
    <LoginHeader>欢迎登录校园智能实训系统</LoginHeader>
    <section class="login-section">
      <div class="wrapper">
        <nav>
          <a
            style="text-decoration: none"
            @click="activeName = 'account'"
            :class="{ active: activeName === 'account' }"
            >账户登录</a
          >
          <a
            style="text-decoration: none"
            @click="activeName = 'qrcode'"
            :class="{ active: activeName === 'qrcode' }"
            >二维码登录</a
          >
        </nav>
        <!-- 表单 -->
        <div v-if="activeName === 'account'" class="account-box">
          <LoginForm v-if="activeName === 'account'"></LoginForm>
        </div>
        <!-- 二维码 -->
        <div v-if="activeName === 'qrcode'" class="qrcode-box">
          <img src="@/assets/images/qrcode.jpg" alt="" />
          <div class="icon-flex">
            <svg
              style="margin-right: 3.125rem"
              t="1714217421166"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7055"
              width="35"
              height="35"
            >
              <path
                d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                p-id="7056"
                fill="#1296db"
              ></path>
            </svg>
            <svg
              t="1714217324726"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4298"
              width="32"
              height="32"
            >
              <path
                d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                fill="#28C445"
                p-id="4299"
              ></path>
              <path
                d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                fill="#28C445"
                p-id="4300"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
.login-section {
  background: url(/src/assets/images/121.png) no-repeat center / cover;
  height: 30.5rem;
  position: relative;
  .wrapper {
    width: 23.75rem;
    background: #fff;
    min-height: 25rem;
    position: absolute;
    left: 50%;
    top: 3.375rem;
    transform: translate3d(6.25rem, 0, 0);
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.15);
    nav {
      height: 3.4375rem;
      border-bottom: 0.0625rem solid #f5f5f5;
      display: flex;
      padding: 0 2.5rem;
      text-align: right;
      align-items: center;
      a {
        flex: 1;
        line-height: 1;
        display: inline-block;
        font-size: 1.125rem;
        position: relative;
        color: #999;
        &:first-child {
          border-right: 0.0625rem solid #f5f5f5;
          text-align: left;
          color: #999;
        }
        &.active {
          color: #27ba9b;
          font-weight: bold;
        }
      }
    }
  }
}
.qrcode-box {
  text-align: center;
  padding-top: 2.5rem;
  p {
    margin-top: 1.25rem;
    a {
      color: #27ba9b;
      font-size: 1rem;
    }
  }
}
.el-divider--horizontal {
  position: relative;
  bottom: 210px;
}
.icon-flex {
  margin-top: 1.25rem;
}
</style>
